<template>
	<view>
		<view class="item" @click="gotoPage">
			<text class="tuikcg">退款成功</text>
			<view class="fuw">
				<image src="/static/tp.png" mode=""></image>
				<view class="jj">
					<view class="le">
		
						<text class="jss">
							日常保洁+油烟机清洗+房屋打扫
						</text>
						<text class="jinj">3小时清洁，深度打扫，干净清洁室内</text>
					</view>
					<view class="rig">
						￥39.9
					</view>
		
				</view>
			</view>
			<view class="sf">
				<view class="yh">
					<image src="/static/优惠券.png" mode=""></image>
				</view>
				<view class="sff">
					<text class="sj">实付：</text>
					<text class="jg">￥39.4</text>
				</view>
				<view class="tuiku">
					<text class="tk">退款金额：</text>
					<text class="jg">￥39.4</text>
				</view>
			</view>
			<view class="btn" @click="gotoPage">
				<u-button type="primary" size="mini" color="#626262" :plain="true" text="售后详情"></u-button>
				 
			</view>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			gotoPage(){
				this.$toPage("/components/refund/refundDetails/refundDetails")
			}
		}
	}
</script>

<style lang="less">
	.item {
		background-color: #ffffff;
		border-radius: 8px;
		margin: 5px 8px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		padding: 4px 12px;
		.tuikcg{
			font-size: 15px;
			color: red;
			margin-bottom: 8px;
		}
		.fuw{
			// background-color: #e1e1e1;
			border-radius: 8px;
			display: flex;
			justify-content: space-between;
			image{
				border-radius: 8px;
				width: 65px;
				height: 65px;
				margin-right: 18px;
			}
			.jj{
				display: flex;
				.le{
					margin-top:8px ;
					display: flex;
					flex-direction: column;
					.jss{
						margin-right: 10px;
					}
					.jinj{
						font-size:14px ;
						color: #6a6a6a;
						width: 180px;
						 white-space: nowrap;        /* 禁止换行 */
						  overflow: hidden;           /* 超出部分隐藏 */
						  text-overflow: ellipsis;    /* 超出部分显示省略号 */
					}
				}
				.rig{}
			}
		}
		.sf{
			display: flex;
			
			.yh{
				margin-right: 3px;
				image{
					
					width: 25px;
					height: 25px;
				}
			}
			.sff{
				.sj{
					font-size: 14px;
				}
				.jg{
						font-size: 14px;
				}
			}
			.tuiku{
				margin-left: 4px;
				.tk{
					font-size: 14px;
				}
				
				.jg{
					font-size: 15px;
					font-weight: 400;
					color: red;
				}
			}
		}
		.btn{
			// width: 180px;
		}
		
	}

</style>
